<template>
  <div>
    <home-common-search class="hide" v-if="!utils.getIsApp()" from="information"></home-common-search>
    <div class="information-menu">
      <div
        class="menu-list"
        :class="item.ac_id == ac_id ? 'menu-active' : ''"
        v-for="item in articleclass_list"
        v-bind:key="item.ac_id"
        @click="switchmenu(item.ac_id)"
      >{{ item.ac_name }}</div>
      <div class="menu-list" style="width: 1px;height: 10px"></div>
    </div>
    <div class="dang"></div>

    <div
      class="flex-wrapper"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="5"
    >
      <div
        class="information-main"
        v-for="(item, index) in articleList"
        v-bind:key="index"
        @click="goinformationdetail(item)"
      >
        <div v-if="item.article_type == 1" class="information-type1">
          <!--  item.article_title -->
          <div class="information-title" :class="{active: item.is_top == 1}">
            {{ item.article_title}}
            <span
              :class="{topPing: item.is_top == 1}"
              v-if="item.is_top == 1"
            >（置顶）</span>
          </div>
          <div
            v-if="item.article_pic.length"
            :src="item.article_pic[0]"
            class="information-bigimg"
            :style="{backgroundImage:`url(${item.article_pic[0]})`}"
          ></div>
        </div>

        <div v-if="item.article_type == 2" class="information-type2">
          <div class="information-title">
            {{ item.article_title.length > 15? item.article_title.slice(0,15) : item.article_title }}
            <span :class="{topPing: item.is_top == 1}" v-if="item.is_top == 1">（置顶）</span>
          </div>
          <div class="information-moreimg">
            <div
              v-if="index < 3"
              v-for="(items, index) in item.article_pic"
              v-bind:key="index"
              :src="items"
              :style="{backgroundImage:`url(${items})`}"
            ></div>
          </div>
        </div>

        <div v-if="item.article_type == 3" class="information-type3">
          <div class="information-left-title">
            {{ item.article_title.length > 15? item.article_title.slice(0,15) : item.article_title }}
            <span :class="{topPing: item.is_top == 1}" v-if="item.is_top == 1">（置顶）</span>
          </div>
          <div
            v-if="item.article_pic.length"
            :src="item.article_pic[0]"
            class="information-smallimg"
            :style="{backgroundImage:`url(${item.article_pic[0]})`}"
          ></div>
        </div>

        <div class="information-foot">
          <div class="foot-size">
            发布时间
            <span class="foot-time">{{ gettime(item.article_time) }}</span>
          </div>
          <div class="foot-size">{{ item.click_count }}人阅读</div>
        </div>
      </div>
    </div>

    <!--        <div class="information-live">-->
    <!--             <video class="information-video"></video>-->
    <!--             <div class="information-live-title">-->
    <!--                 福鼎白茶的历史根源，看完之后，又学到不少知识-->
    <!--             </div>-->
    <!--        </div>-->
  </div>
</template>

<script>
import HomeCommonSearch from "../common/HomeCommonSearch";
import EmptyRecord from "../../EmptyRecord";
import { Toast, Indicator } from "mint-ui";
import { getArticleList, getArticleclassList } from "../../../api/homeArticle";

export default {
  name: "Information",
  components: {
    HomeCommonSearch,
  },
  data() {
    return {
      articleclass_list: false,
      active: 0,
      article_type_name: "",
      ac_id: 1, // 文章分类ID
      articleList: [],
      params: { page: 0, per_page: 5 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      keywords: "",
      timerId: "",

      // setTimeout
    };
  },
  created() {},
  beforeRouteEnter(to, from, next) {
    console.log(from);
    if (from.path == "/home/index") {
      to.meta.isBack = true;
    } else {
      to.meta.isBack = false;
    }
    next();
  },
  mounted() {
    if (this.$route.meta.isBack) {
      window.scrollTo(0, 0);
    }
    Indicator.open();
    getArticleclassList()
      .then((res) => {
        Indicator.close();
        this.articleclass_list = res.result.article_class;
      })
      .catch(function (error) {
        Indicator.close();
        Toast(error.message);
      });
  },
  beforeDestroy() {},
  activated() {},
  destroyed() {},
  computed: {},
  methods: {
    loadMore() {
      // this.loading = true;
      if (this.isMore && !this.loading) {
          this.params.page = ++this.params.page;
        console.log(this.params.page)
        this.loading = true;
        this.getArticleList(true);
      }
    },
    getArticleList() {
      Indicator.open();
      getArticleList(this.params, this.ac_id, this.keywords)
        .then((res) => {
          console.log(res);
          Indicator.close();
          if (this.articleList.length) {
            this.articleList = this.articleList.concat(res.result.article_list);
          } else {
            this.articleList = res.result.article_list;
          }
          if (res.result.page_info.hasmore) {
            this.isMore = true;
          } else {
            this.isMore = false;
          }
          this.article_type_name = res.result.article_type_name;
           this.loading = false;
          console.log(this.articleList)
        })
        .catch(function (error) {
          Indicator.close();
          Toast(error.message);
           this.loading = false;

        });
    },
    goinformationdetail(item) {
      this.$router.push({
        name: "HomeInformationdetail",
        query: { article_id: item.article_id },
      });
    },
    switchmenu(id) {
      window.scrollTo(0, 0);
      this.ac_id = id;
      this.articleList = [];
      this.params = { page: 0, per_page: 10 };
      this.$nextTick(()=>{
        this.isMore = true;
        this.loadMore();
      })
 
    },
    gettime(t) {
      let _time = new Date(t * 1000);
      let year = _time.getFullYear(); // 2017
      let month = _time.getMonth() + 1; // 7
      let date = _time.getDate(); // 10
      let hour = _time.getHours(); // 10
      let minute = _time.getMinutes(); // 56
      let second = _time.getSeconds(); // 15
      return year + "-" + month + "-" + date;
    },
  },
};
</script>

<style scoped lang="scss">
.topPing {
  color: #b5b5b5;
  font-size: 0.6rem;
}
::-webkit-scrollbar {
  display: none;
}
.dang {
  margin-top: 5rem;
}
.information-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 123;
  display: flex;
  overflow: scroll;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background: white;
  margin-top: 2.5rem;
  padding: 5px 20px;
}

.menu-list {
  flex: none;
  padding: 5px 0;
  font-size: 0.6rem;
  border-bottom: 2px solid white;
  margin-right: 20px;
}

.menu-active {
  color: $primaryColor;
  border-bottom: 2px solid $primaryColor;
}

.information-main {
  background: white;
  margin-top: 10px;
  padding: 0 4vw;
  display: flex;
  flex-direction: column;
}

.information-type {
  display: flex;
  flex-direction: column;
}

.information-title {
  flex-wrap: wrap;
  font-size: 0.8rem;
  padding: 0.4rem 0;
  font-weight: bold;
}

.information-bigimg {
  width: 92vw;
  height: 40vw;
  background-position: center center;
  background-size: cover;
}

.information-moreimg {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.information-moreimg div {
  width: 29vw;
  height: 23.3vw;
  background-position: center center;
  background-size: cover;
}

.information-type3 {
  padding-top: 0.4rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.information-left-title {
  width: 60vw;
  flex-wrap: wrap;
  font-size: 0.8rem;
  font-weight: bold;
}

.information-smallimg {
  width: 28vw;
  height: 28vw;
  background-position: center center;
  background-size: cover;
}

.information-foot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
}

.foot-size {
  font-size: 0.5rem;
  color: #b5b5b5;
}

.foot-time {
  margin-left: 1.2rem;
}

.information-live {
  margin-top: 10px;
  background: white;
  padding: 2vw 4vw;
}

.information-video {
  width: 92vw;
  height: 46vw;
}

.information-live-title {
  font-size: 0.7rem;
  font-weight: bold;
}
</style>
